<template>
  <a-modal
    width="90%"
    top="5vh"
    :modal-style="{ height: '90vh' }"
    title="操作记录"
    v-model:visible="showModal"
    fullscreen
    :align-center="false"
    :render-to-body="false"
  >
    <template #footer>
      <a-button @click="showModal = false">取消</a-button>
    </template>
    <a-card :bordered="false" class="pt-3 mb-3 proCard">
      <a-space align="center">
        <a-input-group style="width: 380px">
          <a-input
            :style="{ width: '100%' }"
            v-model="inputKey"
            clearable
            placeholder="请输入关键词"
            @keyup.enter="loadLogs"
          />
          <a-button type="primary" @click="loadLogs">
            <template #icon>
              <a-icon>
                <SearchOutlined />
              </a-icon>
            </template>
            查询
          </a-button>
        </a-input-group>
      </a-space>
    </a-card>
    <a-card :bordered="false" class="pt-3 mb-3 proCard">
      <a-descriptions
        :title="`操作人：${item.createUser} - ${item.createTime}`"
        :column="{ xs: 2, md: 2, lg: 2 }"
        v-for="item in logList"
        :key="item.id"
      >
        <a-descriptions-item
          :label="item1.des"
          :key="item1.newVal"
          :span="2"
          v-for="item1 in item.content"
        >
          旧:{{ item1.oldVal }} ---- 新:{{ item1.newVal }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { getMerchantDataLogs } from '@/api/business/record-management';
  // import { useRoute } from 'vue-router';
  // const route = useRoute();
  const showModal = ref(false);
  const merchantDataId = ref('');
  const inputKey = ref('');
  const logList = ref<Recordable[]>([]);

  function loadLogs() {
    const params = {
      merchantDataId: merchantDataId.value,
      value: inputKey.value,
      page: 1,
      pageNum: 1,
      pageSize: 9990,
    };
    getMerchantDataLogs(params).then((res) => {
      logList.value = res.list.map((item) => {
        try {
          const content = JSON.parse(item.content);
          console.log(content);
          return {
            ...item,
            content,
          };
        } catch (error) {
          return {
            ...item,
            content: [],
          };
        }
      });
    });
  }
  function openModal(id: string) {
    merchantDataId.value = id;
    showModal.value = true;
    loadLogs();
  }
  defineExpose({
    openModal,
  });
</script>

<style lang="less" scoped>
  .record-list {
  }
</style>
